<template>
	<div class="place_order_virtual">
		<van-panel>
			<van-card
				slot="header"
				:title="goods.title"
				:desc="goods.desc"
				num="2"
				price="2.00"
				:thumb="goods.thumb"
			/>
			
			<div class="panel_content">
				<van-icon :name="showNotice ? 'arrow-up' : 'arrow-down'" class="panel_notice" />
				<div @click="showNotice = !showNotice">注意事项</div>
					<ol v-if="showNotice">
						<li>注意事项1</li>
						<li>注意事项2</li>
						<li>注意事项3</li>
						<li>注意事项4</li>
					</ol>
			</div>
			
			<div slot="footer" class="clearfix">
				<div class="float-l">商品金额</div>
				<div class="float-r red">{{7200 | yuan}}</div>
			</div>
		</van-panel>
		
		<van-submit-bar
			:price="3050"
			label="总计："
			buttonText="提交订单"
			:loading="isSubmit"
			:disabled="isDisabled"
			@submit="onSubmit"
		/>
	</div>
</template>

<script>
	import {
		Panel,
		SubmitBar,
		Card,
	} from 'vant';

	export default {
		
		data() {
			return {
				showNotice: false,
				isSubmit: false,
				isDisabled: false,
				goods: {
					id: '2',
					title: '陕西蜜梨',
					desc: '约600g',
					price: 690,
					status: 1,
					num: 3,
					thumb: 'https://img.yzcdn.cn/public_files/2017/10/24/f6aabd6ac5521195e01e8e89ee9fc63f.jpeg'
				}
			}
		},
		
		methods: {
			onSubmit() {
				this.isSubmit = true;
			}
		},
		
		components: {
			[Panel.name]: Panel,
			[Card.name]: Card,
			[SubmitBar.name]: SubmitBar,
		}
	}

</script>

<style scoped lang="scss">
	
	.panel_content {
		position: relative;
		padding: 10px 15px;
		.panel_notice {
			position: absolute;
			top: 15px;
			right: 15px;
		}
		
		ol{
			padding-left: 12px;
			padding-top: 10px;
			list-style: decimal;
			color: $font-color-gray;
			overflow: hidden;
			li{
				margin-bottom: 10px;
				font-size: $font-size-small;
				&:last-child{
					margin: 0;
				}
			}
		}
	}
	
/*
	.slide-enter,.slide-leave-to{
		height: 0;
	}
	
	.slide-enter-active,.slide-leave-active{
		transition: all 1s;
	}
*/

</style>
